<template>
    <div>
        <van-dialog 
            v-model="show" 
            title="兑换优惠券" 
            show-cancel-button
            :before-close="onBeforeClose"
            @cancel="cancel"
            @confirm="confirm"
        >   

            <van-form 
                @submit="confirm" 
                v-if="show" 
                class="form"
                ref="myform"
            >

                <van-field
                    v-model="form.couponcode"
                    name="couponcode"
                    placeholder="请输入优惠码"
                    :rules="[{ required: true, message: '优惠码不能为空' }]"
                />

            </van-form>

        </van-dialog>
    </div>
</template>
<script>

export default {
    props: {

    },
    data() {
        return {
            show:false,
            form:{
                couponcode:'',
            },
        }
    },
    watch:{

    },
    methods:{
      
        onBeforeClose(action, done) {
            if (action === "confirm") {
                return done(false);
            } else {
                return done();
            }
        },

        cancel(val){
            this.$emit('close',val);
        },

        confirm(){
            this.$refs["myform"].validate().then(()=>{
                const loading = this.$loading({});
                this.$api.myCouponConvert(this.form).then(res =>{
                    loading.close();
                    this.cancel('refresh');
                    this.$toast.success('兑换成功');
                }).catch(err =>{
                    loading.close();
                })
            })
        },

        








    },
    mounted(){
        this.show= true;
    }
}
</script>
<style lang="less" scoped>
    .form{
        padding:20px;
    }

    /deep/ .van-field__body{
        padding: 8px 14px;
        border-radius: 5px ;
        border: 1px solid  #e4e4e4 !important;
    }

    /deep/ .van-cell::after{
        display: none;
    }

    /deep/ .van-field__error-message{
        padding-left: 14px;
    }
    
</style>